<template>
  <div>
    <div>

      <!-- <div class="project">
				<p>项目列表</p>
			</div> -->
      <div style="margin-bottom:60px;">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-swipe :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(image, index) in images" :key="index">
              <img :src="image.url" style="width:100%" @click="gotoimg(image.targetUrl)" />
            </van-swipe-item>
          </van-swipe>
          <!-- 公告栏 -->
          <div class="textg">
            <van-icon name="volume-o" v-show="text.val" />
          </div>
          <div class="textBox">
            <transition name="slide">
              <p class="text" :key="text.id" @click="$router.push(`/noticeList?id=${text.routerId}`)">{{text.val}}</p>
            </transition>
          </div>

          <!-- <div v-for="item in Notice" :key="item.id">
						<div @click="$router.push(`/newslist?id=${item.id}`)">
							<van-notice-bar
								v-if="item.type == 5"
								left-icon="volume-o"
								:text="item.title"
							/>
						</div>
					</div> -->
          <van-list v-model="loading" :finished="finished" finished-text="我是有底线的" @load="onLoad" :immediate-check="false" :offset="10">

            <div v-for="item in getList" :key="item.id">
              <!-- <img src="../../assets/images/banner.png" width="100%" style="height: 4rem;" alt=""> -->
              <div class="contentMsg" @click="$router.push(`/projectDetail?id=${item.id}`)">
                <div class="byTime">
                  <span :class="item.status=='2'?'red':'green'">{{item.statusName}}</span> 截止时间 {{common.formatD(item.dueTime)}}
                </div>
                <div class="contentText">
                  <van-row>
                    <van-col span="10" offset="1" class="tal">
                      <span class="font38">{{item.content}}</span>
                    </van-col>
                    <van-col span="10" offset="1" class="tar"></van-col>
                  </van-row>
                  <van-row class="pt3">
                    <van-col span="12" class="tac">
                      <p><span class="red">{{item.minAmt}}</span>USDT</p>
                      <p class="font28">起投金额</p>
                    </van-col>
                    <van-col span="12" class="tac">
                      <p class="red">{{item.term }}{{item.termUnitName}}</p>
                      <p class="font28">投资期限</p>
                    </van-col>
                  </van-row>
                  <van-row class="progress">
                    <van-progress :color="item.status=='2'?'#4caf50':'#e8bb57'" :percentage="item.percentage" stroke-width="14" />
                  </van-row>
                  <van-row class="pt3">
                    <van-col span="12" class="tac">
                      <span>完成{{item.percentage}}%</span>
                    </van-col>
                    <van-col span="12" class="tac">
                      <span>项目金额<span class="red">{{common.formatAmount(item.totalAmt)}}</span>USDT</span>
                    </van-col>
                  </van-row>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>

      </div>

    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: {
        pageSize: 10,
        currentPage: 1,
        status: '1',
      },
      total: 2,
      isLoading: false,
      finished: false,  //是否加载完所有数据
      loading: false,  //是否加载完所有数据
      getList: [],
      images: [],
      Notice: [],
      number: 0,
      arrs: [],
      arrsid: [],
      timer: '',
    }
  },
  computed: {
    text () {
      return {
        id: this.number,
        val: this.arrs[this.number],
        routerId: this.arrsid[this.number]
      }
    }
  },
  methods: {
    gotoimg (value) {
      if (value) {
        this.goto('value')
        // window.open(value,'_blank');	
      } else {
        // this.$notify({ type: 'warning', message:"图片跳转地址为空！"});
        return;
      }

    },
    onLoad () {      //上拉加载
      setTimeout(() => {
        this.projectList()
        this.loading = true
        this.data.currentPage++
      }, 500)
    },
    onRefresh () {
      setTimeout(() => {
        this.isLoading = false;
        this.loading = false
        this.finished = false
        this.data.currentPage = 1;
        this.getList = []
        this.projectList()
        this.$toast('刷新成功');
      }, 500);
    },
    //获取项目列表
    async projectList () {
      const url = '/project/queryPage'
      let result = await this.request.mobileRequest('POST', url, this.data)
      if (result.code == 200) {
        this.loading = false
        for (let i of result.data.datas) {
          i.percentage = Number((i.availableAmt / i.totalAmt * 100).toFixed(0))
        }
        if (this.data.currentPage == 1) {
          this.getList = result.data.datas
        } else {
          if (result.data.datas != '' && this.data.currentPage > 1) {
            this.getList = this.getList.concat(result.data.datas)
          }
        }
        if (result.data.datas.length < this.data.pageSize) {
          this.finished = true
        }
      } else {
        this.$notify({ type: 'warning', message: result.msg });
      }
    },
    //获取首页banner
    async getBannerList () {
      const url = '/banner/queryPage'
      let result = await this.request.mobileRequest('POST', url, {})
      if (result.code == 200) {
        this.images = result.data.datas
      } else {
        this.$notify({ type: 'warning', message: result.msg });
      }
    },
    goto (item) {
      plus.runtime.openURL(item);//成功跳转了
      // window.location.href = item
    },
    //获取公告
    async getNotice () {
      const url = '/article/queryPage'
      let result = await this.request.mobileRequest('POST', url, {})
      if (result.code == 200) {
        this.Notice = result.data.datas
        this.Notice.map((item, i) => {
          if (item.type == 5) {
            this.arrs.push(item.title);
            this.arrsid.push(item.id)
          }
        })
      } else {
        this.$notify({ type: 'warning', message: result.msg });
      }
    },
    startMove () {
      this.timer = setTimeout(() => {
        if (this.number === this.arrs.length - 1) {
          this.number = 0;
        } else {
          this.number += 1;
        }
        this.startMove();
      }, 2000); // 滚动不需要停顿则将2000改成动画持续时间			
    }
  },
  // 切换开启定时器
  activated () {
    // console.log('切换');
    this.startMove();
  },
  // keepalive退出关闭定时器
  deactivated () {
    clearTimeout(this.timer)
    // console.log('退出',this.timer);
  },
  mounted () {
    this.projectList();
    this.getBannerList();
    this.getNotice();

  }
}
</script>

<style scoped>
.van-col p {
  font-size: 0.38rem;
  line-height: 0.4rem;
  margin-top: 0.2rem;
}
/* 公告栏 */
.textg {
  width: 5%;
  float: left;
  padding-top: 9px;
  padding-left: 1%;
}
.textBox {
  width: 92%;
  height: 25px;
  color: red;
  /* margin: 0 auto; */
  overflow: hidden;
  position: relative;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.text {
  width: 100%;
  position: absolute;
  bottom: 0;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s linear;
}
.slide-enter {
  transform: translateY(20px) scale(1);
  opacity: 1;
}
.slide-leave-to {
  transform: translateY(-20px) scale(0.8);
  opacity: 0;
}
</style>
